<script setup>
import { reactive, watch } from 'vue'
const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})

// 4. 监听响应式对象数据的一个数据，复杂类型
// watch(()=>数据, 改变后回调函数, {deep: true})
const getDate = () => {
  //一进来就执行一次oi，数据改变再次执行oi
  console.log('oi')
}
watch(
  user.info,
  () => {
    getDate()
  },
  {
    //进入就立马执行一次前边的函数
    immediate: true
  }
)

// 2s改变数据
setTimeout(() => {
  user.info.age = 60
}, 2000)
</script>

<template>
  <p>姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}</p>
</template>
